<template>
  <section id="agent">
    <header class="agent-header">
      <div class="agent-slogan">
        <img src="../assets/images/agent_03.png" alt="">
      </div>
      <get-more type="4"></get-more>
    </header>
    <div class="advantage">
      <h3 class="section-title">我们代帐优势</h3>
      <ul class="list">
        <li
          v-for="item in advantages"
          :key="item.title"
          :style="{backgroundImage: `url(${item.bg_url})`}">
          <section class="content">
            <div class="img-container">
              <img :src="item.icon_url" alt="">
            </div>
            <div class="text-container">
              <h4 class="title">{{item.title}}</h4>
              <p class="desc">{{item.desc}}</p>
            </div>
          </section>
        </li>
      </ul>
    </div>
    <div class="scheme">
      <h2>详细的服务内容，满足代帐需求</h2>
      <div class="table">
        <table>
          <tr v-for="(n, index) in Math.ceil(table_list.length/2)" :key="n + '_' + index">
            <td>
              <span>{{ n }}</span>
              <div>
                <h4>{{ table_list[n-1].title }}</h4>
                <p>{{ table_list[n-1].tips }}</p>
              </div>
            </td>
            <td v-if="n + Math.ceil(table_list.length/2) <= table_list.length">
              <span>{{ n + Math.ceil(table_list.length/2) }}</span>
              <div>
                <h4>{{ table_list[n + Math.ceil(table_list.length/2) - 1].title }}</h4>
                <p>{{ table_list[n + Math.ceil(table_list.length/2) - 1].tips }}</p>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="2">注：服务内容和价格或因地区，政策不同有所区别，具体请联系当地财税顾问。</td>
          </tr>
        </table>
      </div>
      <h2>请按照您公司的营业额选择代账方案</h2>
      <a :class="choose_scheme_index===index?'item item-active':'item'" href="javascript:;" v-for="(item, index) in scheme_list" :key="item + '_' + index" @click="choose_scheme_index = index">{{ item }}</a>
      <button @click="getAgentPlanNPrice">免费获取代账方案及价格</button>
    </div>
    <div class="flow">
      <h3 class="section-title">规范的办理流程，代账更放心</h3>
      <p class="section-desc">知道详细服务流程,办理简单效率</p>
      <ul class="list">
        <li
          v-for="item in flow_list"
        >
          <div class="img-container">
            <img :src="item.img_url" alt="">
          </div>
          <div class="text-container">
            <h4 class="title">{{item.title}}</h4>
            <p class="desc">{{item.desc}}</p>
          </div>
        </li>
      </ul>
      <div class="btn-container">
        <button @click="getAgentNow" class="btn btn-primary btn-agent">立即代帐</button>
      </div>
    </div>
    <faq :list="FAQ_list"></faq>
    <contract-us></contract-us>
  </section>
</template>

<script>
  /**
   * @Author: lifuzhao
   * @Date: 2019-05-05
   * @Project: eabax
   */
  import getMore from '../components/get-more'
  import contractUs from '~/components/contract-us.vue'
  import faq from '~/components/faq.vue'
  import '../assets/less/agent.less'
  import Bus from '../components/event-bus'
  export default {
    name: 'agent',
    data(){
      return {
        choose_scheme_index: -1,
        advantages: [{
          title: '避免税务处罚',
          desc: '及时报税 提供税务预警，避免处罚',
          bg_url: require('../assets/images/agent_12.png'),
          icon_url: require('../assets/images/agent001.png')
        }, {
          title: '资深会计服务',
          desc: '为您解决公司各发展阶段的服务需求',
          bg_url: require('../assets/images/agent_07.png'),
          icon_url: require('../assets/images/agent002.png')
        }, {
          title: '日常财税指导',
          desc: '定期在线培训、税务问题专人解答',
          bg_url: require('../assets/images/agent_10.png'),
          icon_url: require('../assets/images/agent003.png')
        }, {
          title: '手机随时查账',
          desc: '营收情况、应缴税款一目了然',
          bg_url: require('../assets/images/agent_12.png'),
          icon_url: require('../assets/images/agent004.png')
        }, {
          title: '上门取票/代购发票',
          desc: '避免奔波，为您节约每一分钟',
          bg_url: require('../assets/images/agent_12.png'),
          icon_url: require('../assets/images/agent005.png')
        }, {
          title: '出错全额赔付',
          desc: '出错全额赔付',
          bg_url: require('../assets/images/agent_12.png'),
          icon_url: require('../assets/images/agent006.png')
        }],
        table_list: [
          {
            title: '每月代理记账',
            tips: '(整理原始凭证、编制记账凭证等)'
          },
          {
            title: '出具财务报表',
            tips: '(资产负债表、利润表、现金流量表)'
          },
          {
            title: '财税专家审核',
            tips: ''
          },
          {
            title: '每月纳税申报',
            tips: ''
          },
          {
            title: '根据企业需求安排专业人员到税务局购买发票',
            tips: ''
          },
          {
            title: '代理开具发票',
            tips: ''
          },
          {
            title: '每月装订凭证',
            tips: ''
          },
          {
            title: '每月经营月报及时推送',
            tips: ''
          },
          {
            title: '年末装订总账明细',
            tips: ''
          },
          {
            title: '年度企业所得税汇算清缴',
            tips: '(税务年报)'
          },
          {
            title: '报送企业年度财务资料给国地税',
            tips: ''
          },
          {
            title: '企业工商年报',
            tips: ''
          },
          {
            title: '税务申报表及时推送',
            tips: ''
          },
          {
            title: '日常的财税咨询及建议',
            tips: ''
          },
          {
            title: '根据公司经营状况，给予专业的税负预警',
            tips: ''
          },
          {
            title: '其他',
            tips: ''
          },
        ],
        scheme_list: ['B.0-100万', 'B.0-100万', 'B.0-100万', 'B.0-100万'],
        flow_list: [{
          title: '',
          desc: '',
          img_url: require('../assets/images/a1.png')
        }, {
          title: '定制方案',
          desc: '根据您的需求，客户专员会制定一套详细的服务方案',
          img_url: require('../assets/images/a2.png')
        }, {
          title: '一对一服务',
          desc: '进度专员、材料专员、外勤人员为您 办理相关事宜',
          img_url: require('../assets/images/a3.png')
        }, {
          title: '合同洽谈',
          desc: '如果您对我们的方案和服务认可进行洽谈合同事宜',
          img_url: require('../assets/images/a4.png')
        }, {
          title: '确认签单',
          desc: '双方对合同和条款都没有异议，确认签单',
          img_url: require('../assets/images/a5.png')
        }, {
          title: '售后服务',
          desc: '我们会高效准确的为您提供优质的售后服务',
          img_url: require('../assets/images/a6.png')
        }],
        FAQ_list: [
          {
            q: '您们的全额赔付是什么意思？',
            a: '在记账过程中由我们会计造成的损失，我们直接承担，并全额赔付给客户。'
          },
          {
            q: '小规模月度十万以内的营业额是不是可以免增值税？',
            a: '国家税务总局会同财政部制发《关于实施小微企业普惠性税收减免政策的通知》（财税〔2019〕13号），其中明确自2019年1月1日至2021年12月31日，对月销售额10万元以下的增值税小规模纳税人，免征增值税。'
          },
        ]
      }
    },
    methods: {
      getAgentPlanNPrice(){
        Bus.$emit('get-more', {
          type: '3'
        })
      },
      getAgentNow(){
        Bus.$emit('get-more', {
          type: '4'
        })
      }
    },
    layout: 'common',
    components: {
      getMore,
      faq,
      contractUs
    }
  }
</script>
